<template>
	<view class="interviewInvitation-page">
		<div class="interviewInvitation-wrap">
			<h3>面试时间</h3>
			<div class="date">
				<leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择日期时间" :value="leeDateTime"></leeDatetime>
			</div>
			<div class="btns">
				<button @click="close">取消</button>
				<button @click="confirm">确认</button>
			</div>
		</div>
	</view>
</template>

<script>
	import leeDatetime from './leeDatetime.vue'
	export default {
		name: "interviewInvitation",
		components: {
			leeDatetime
		},
		data() {
			return {
				leeDateTime: ''
			};
		},
		methods: {
			bindLeeDateTimeChange(e) {
				console.log("查看时间组件返回值", this.leeDateTime, e.value, e.text)
				this.leeDateTime = e.value
			},
			close() {
				this.$emit('close')
			},
			confirm() {
				if (this.leeDateTime.length <= 0) return uni.showToast({
					title: "请选择面试时间",
					icon: 'none'
				})
				this.$emit('confirm', this.leeDateTime)
			}
		}
	}
</script>

<style lang="less" scoped>
	.interviewInvitation-page {
		position: fixed;
		top: 0%;
		bottom: 0%;
		left: 0%;
		right: 0%;
		background: rgba(0, 0, 0, .7);
		display: flex;
		align-items: center;
		justify-content: center;

		.interviewInvitation-wrap {
			width: 50vw;
			padding: 34upx;
			background: #fff;
			border-radius: 8upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			h3 {
				color: #28211F;
				font-size: 28upx;
				font-weight: 600;
			}

			.date {
				padding-top: 30upx;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				margin-top: 20upx;

				button {
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					border: 1px solid #999999;
					border-radius: 8upx;
					color: #999999;
					font-size: 24upx;
					font-weight: 500;
					background: #fff;

					&:last-of-type {
						margin-left: 20upx;
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}

		}
	}
</style>
